<script setup lang="ts">
// 新用户增长趋势
import { storeToRefs } from 'pinia'
import { reactive, watch } from 'vue'
import LineChart from '@/components/Echart/line/lineChart.vue'
import { useHomeStore } from '@/stores/module/home'
import { useDialogStore } from '@/stores/dialog'
const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore
const dialogInfoVisible = dialogInfo.visible
const homeStore = useHomeStore()
const { globalPerformanceReq } = storeToRefs(homeStore) //接口数据

watch(
  () => globalPerformanceReq.value,
  () => {},
  { deep: true }
)
</script>
<template>
  <card-box componentName="globalPerformanceLine">
    <template v-slot:title>
      <h1
        :class="{
          subtitle: dialogInfoVisible,
        }"
      >
        {{ globalPerformanceReq.title }}
      </h1>
    </template>
    <LineChart
      :chart-data="globalPerformanceReq"
      v-if="globalPerformanceReq.info.length"
      :x="null"
      :y="null"
    />
    <div v-else class="default-img">
      <p>{{ $t('bi_common_nodata') }}</p>
    </div>
  </card-box>
</template>
<style lang="scss" scoped>
.default-img {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/default.png');
  background-repeat: no-repeat;
  background-position: center;

  font-size: 16px;
  color: #00f6ff;
}
.subtitle {
  font-size: 30px;
}
</style>
